<style lang="scss" scoped>
.order-file {
  :deep td {
    vertical-align: top;
  }
  .list {
    text-align: left;
    padding-left: 10px;
    .el-row {
      margin-bottom: 10px;
      div {
        &:last-child {
          color: #999;
        }
      }
    }
  }
}
</style>
<template>
  <div class="order-file">
    <!-- 导出 -->
    <el-row class="import_global">
      <el-button type="warning" icon="el-icon-download" size="small" round>
        批量下载
      </el-button>
      <el-button
        type="danger"
        icon="el-icon-download"
        size="small"
        round
        @click="importVisible = true"
      >
        导入文件
      </el-button>
    </el-row>
    <!-- 导入 -->
    <upload-com
      title="导入订单"
      :visibleProp="importVisible"
      @close="importVisible = false"
      @success="
        onQuery()
        importVisible = false
      "
    />
    <!-- 预览 -->
    <pdf-com
      src="/20220730152312935163.pdf"
      title="pdf"
      :visibleProp="pdfVisible"
      @close="pdfVisible = false"
    />
    <!-- 查询 -->
    <el-form :inline="true" :model="form" label-width="80px" class="query-form">
      <el-col :span="8">
        <el-form-item label="收货单位">
          <el-input v-model="form.user" placeholder="输入收货单位"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户">
          <el-select v-model="form.name" placeholder="输入客户名">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="提单柜号">
          <el-input v-model="form.user" placeholder="提单号/柜号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报关单号">
          <el-input v-model="form.user" placeholder="输入报关单号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="时间">
          <el-select v-model="form.name" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-row>
          <i class="el-icon-edit el-button--text" />
          <el-button type="text" style="margin-left: 6px"
            >更多搜索条件</el-button
          >
        </el-row>
      </el-col>
      <el-row class="btn" type="flex" justify="center">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onQuery">重置</el-button>
      </el-row>
    </el-form>
    <!-- 表格列表 -->
    <table-com
      ref="table"
      api="/order/queryList"
      :column="column"
      :params="{}"
      :config="{ getList }"
      @row-click="rowClick"
    >
      <template v-slot="{ prop, row, column }">
        <div class="list" v-if="column.label !== '操作'">
          <template v-if="showList[row.id]">
            <el-row v-for="(item, index) in column.child" :key="index">
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
            <div v-if="prop === 'orderInfo'">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >编辑</el-button
              >
            </div>
          </template>
          <template v-else>
            <el-row
              v-for="(item, index) in column.child.slice(0, 1)"
              :key="index"
            >
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
          </template>
        </div>
        <template v-else>
          <el-row>
            <el-link
              type="warning"
              @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
              >下载全部</el-link
            >
            <el-link
              type="warning"
              class="ml_10"
              @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
              >查看全部</el-link
            >
          </el-row>
          <el-row>
            <el-link
              type="warning"
              @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
              >文件压缩</el-link
            >
            <el-link
              type="warning"
              class="ml_10"
              @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
              >文件上传</el-link
            >
          </el-row>
        </template>
      </template>
    </table-com>
  </div>
</template>

<script>
import UploadCom from '@/components/UploadCom.vue'
import PdfCom from '@/components/PdfCom.vue'

export default {
  name: 'OrderFile',
  components: {
    UploadCom,
    PdfCom
  },
  data() {
    return {
      form: {
        user: '',
        name: ''
      },
      column: [
        {
          label: '订单',
          prop: 'orderInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '提运号', prop: 'ladingNo' },
            { label: '报关单单号', prop: 'declarationNo' },
            { label: '关税税号', prop: 'tariffNo' },
            { label: '增值税税号', prop: 'vatNo' },
            { label: '启运国', prop: 'startShipmentCountry' },
            { label: '贸易国', prop: 'tradeCountry' },
            { label: '目的国', prop: 'destCountry' }
          ]
        },
        {
          label: '收发货单位',
          prop: 'addressInfo',
          minWidth: '120',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '货物代理人', prop: 'goodsProxy' },
            { label: '货物接收人', prop: 'goodsReceiver' },
            { label: '申报单位名称', prop: 'declareCompanyName' },
            { label: '收货单位名称', prop: 'receiveCompanyName' },
            { label: '发货单位名称', prop: 'deliverCompanyName' },
            { label: '消费单位名称', prop: 'consumeCompanyName' }
          ]
        },
        {
          label: '核销',
          prop: 'cancelVerificationInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '许可证编号', prop: 'licenseNo' }
          ]
        },
        {
          label: '结算',
          prop: 'settlementInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '总关税金额', prop: 'tariffAmount' },
            { label: '总增值税金额', prop: 'addValueTaxAmount' },
            { label: '总税额', prop: 'sumTaxAmount' }
          ]
        },
        {
          label: '文件',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '文件类型', prop: 'fileType' },
            { label: '', prop: 'fileShowName' }
          ]
        },
        {
          label: '操作',
          slot: true
        }
      ],
      importVisible: false,
      pdfVisible: false,
      showList: []
    }
  },
  methods: {
    onQuery() {
      this.$refs.table.fetch(1)
    },
    rowClick(row) {
      this.$set(this.showList, row.id, !this.showList[row.id])
    },
    getList(list) {
      list.forEach(() => {
        this.showList.push(false)
      })
    }
  },
  mounted() {
    this.onQuery()
  }
}
</script>
